<style>
  .item {
    border-bottom: 2px solid gray;
    margin-bottom: 10px;
  }
</style>
<div id="content">...正在加在数据</div>

<script src="./getjson.js"></script>
<script>
  // const promises = [
  //   getJSON('./data1.json'),
  //   getJSON('./data2.json'),
  //   getJSON('./data3.json')
  // ]
  const promises = [1,2,3]
    .map(n => getJSON(`./data${n}.json`))
  Promise.all(promises).then(
    datas => {
      return datas.reduce((s, data) => {
        return [...s, ...data.data]
      }, [])
    }
  ).then((products) => {
    console.log(products)
    const content = document.getElementById('content')
    content.innerHTML =
      products.map(p => `<div class='item'>
        <img src='${p.article_pic}'/>
        <div>
          <h2>${p.article_title}</h2>
          <p>${p.article_date}</p>
          <p>${p.article_price}</p>
          <p>${p.article_content}</p>
        </div>
      </div>`).join('')
  })

  // 一次取出所有商品数据（data1-3.json），显示完整商品列表
  // 每条数据的模版
  /*
  <div class='item'>
    <img src='图片'/>
    <div>
      <h2>标题</h2>
      <p>时间</p>
      <p>价格</p>
      <p>内容</p>
    </div>
  </div>
  */
</script>
